<script setup>
import ueMsg from "/public/js/app.js";
import PageLayout from "@/components/Layout/PageLayout/PageLayout.vue";
import LeftYtPanel from "./child/left/YtPanel/YtPanel.vue";
import LeftJkPanel from "./child/left/JkPanel/JkPanel.vue";
import LeftGjPanel from "./child/left/GjPanel/GjPanel.vue";
import RightYtPanel from "./child/right/YtPanel/YtPanel.vue";
import RightJkPanel from "./child/right/JkPanel/JkPanel.vue";
import RightGjPanel from "./child/right/GjPanel/GjPanel.vue";
import WarringModel from "./child/compontens/WarringModel.vue";
import MyBtn from "@/components/MyBtn/MyBtn.vue";
import { ref, markRaw } from "vue";
import bus from "@/utils/bus.js";

const menuBtns = markRaw([
  { comL: LeftGjPanel, comR: RightGjPanel, label: "告警", ueId: "3-1" },
  { comL: LeftYtPanel, comR: RightYtPanel, label: "云图", ueId: "3-2" },
  { comL: LeftJkPanel, comR: RightJkPanel, label: "监控", ueId: "3-3" },
]);
const menuBtnPick = ref(0);
const data = ref({});
const showCart = ref(false);

const btnPickChange = (item, index) => {
  ueMsg.apiSend({ MenuStatus: item.ueId });
  menuBtnPick.value = index;
};

bus.on("GjCard", (val) => {
  data.value = val.item;
  showCart.value = val.showCart;
});
document.addEventListener("click", function (event) {
  var target = event.target; // 获取触发点击事件的元素
  var div1 = document.getElementById("child2"); // 获取div元素
  var div2 = document.getElementById("child"); // 获取div元素
  // 检查点击的元素是否为div以外的其他地方
  if (!div1?.contains(target) && !div2?.contains(target)) {
    // 如果是，执行需要的操作
    bus.emit("Cardchild2", true);
  } else {
    bus.emit("Cardchild2", false);
  }
});
// const show = () => {
//   showCart.value = false;
// };
</script>

<template>
  <PageLayout @click="show">
    <template #btn>
      <div class="btn-box">
        <MyBtn
          :key="btnIndex"
          v-for="(btn, btnIndex) of menuBtns"
          :label="btn.label"
          :active="menuBtnPick === btnIndex"
          @click.native="btnPickChange(btn, btnIndex)"
        />
      </div>
    </template>
    <template #left>
      <div id="child2" class="com-full menu-box">
        <transition name="left-in" mode="out-in">
          <component :is="menuBtns[menuBtnPick].comL" :key="menuBtnPick" />
        </transition>
      </div>
    </template>
    <template #right>
      <div class="box">
        <div id="child" class="child-gj" @item-selected="GjCard">
          <WarringModel></WarringModel>
        </div>
        <div class="child-box">
          <transition name="right-in" mode="out-in">
            <component :is="menuBtns[menuBtnPick].comR" :key="menuBtnPick" />
          </transition>
        </div>
      </div>
    </template>
  </PageLayout>
</template>

<style scoped lang="scss">
.btn-box {
  height: 100%;
  display: flex;
  gap: 20px;
}

.menu-box {
  pointer-events: all;
  height: 100%;
}
.box {
  display: flex;
  height: 100%;
  .child-gj {
    pointer-events: all;
    width: 500px;
    height: 100%;
  }
  .child-box {
    width: 1400px;
    height: 100%;
  }
}
</style>
